<template>
  <div class="classical">
    <ul class="classical_ul">
      <li v-for="item in classical_data" :key="item.id">
        
        <router-link to="/">
          
          <div class="li_item">
            <div class="left_img"><img :src="item.img" :alt="item.ver"></div>
            <div class="right_content">
              <h2>{{item.nm}}</h2>
              <span class="sub_title">{{item.enm}}</span>
              <span>{{item.cat}}</span>
              <span>{{item.pubDesc}}</span>
            </div>
          </div>
          <div class="score">
            <span>8.8</span>分
          </div>
        </router-link>
      </li>
    </ul>

  </div>
  
</template>

<script>
export default {
  data(){
    return {
      classical_data:[]
    }
  },
  mounted(){
    this.$axios.all([
      this.$axios.get('ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=0&optimus_uuid=2D3487E0B0FB11EC8F63F78A88F7117C67CAF46DEF4444BBAD1040D071E7281B&optimus_risk_level=71&optimus_code=10'),
      this.$axios.get('ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=9&optimus_uuid=2D3487E0B0FB11EC8F63F78A88F7117C67CAF46DEF4444BBAD1040D071E7281B&optimus_risk_level=71&optimus_code=10'),
      this.$axios.get('ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=19&optimus_uuid=2D3487E0B0FB11EC8F63F78A88F7117C67CAF46DEF4444BBAD1040D071E7281B&optimus_risk_level=71&optimus_code=10')
    ])
    .then(this.$axios.spread((val1,val2,val3)=>{
      console.log(val1,val2,val3);
      if(val1.status == 200 && val2.status == 200 && val3.status == 200){
        let arr = [...val1.data.classicMovies.list,...val2.data.classicMovies.list,...val3.data.classicMovies.list]
        this.classical_data = [...arr]
      }
    }))
    // axios.get('')
    // .then((res)=>{
    //   console.log(res);
    // })
  }
}
</script>

<style lang="less" scoped>
  a{
    color: black;
  }

  .classical{
    // width: 100%;
    background-color: #fff;
    .classical_ul{
      list-style: none;
      width: 90%;
      margin: 0 auto;
      background-color: #fff;
      li{
        position: relative;
        padding: .2667rem 0;
        // background-color: aquamarine;
      }
      .li_item{
        width: 100%;
        display: flex;
        .left_img{
          height: 2.5067rem;
          img{
            width: 1.76rem;
            height: 2.5067rem;
          }
        }
        .right_content{
          overflow: hidden;
          height: 2.5067rem;
          margin-left: .16rem;
          display: flex;
          flex-direction: column;
          text-align: left;
          justify-content: space-around;
          h2{
            font-size: 16px;
          }
          span{
            font-size: 14px;
            font-weight: normal;
            color: rgb(102, 102, 102);
          }
          .sub_title{
            width: 76%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .score{
        position: absolute;
        top: 10%;
        right: 2%;
        // font-size: 12px;
        span{
          font-size: 16px;
          color:rgb(250, 175, 0)
        }
      }
    }
  }
</style>